<template>
	<view>
		<view class="card-view">
			<image src="../../static/img/train-banner1.png" mode="aspectFill" style="width: 100%;"></image>
		</view>

		<view class="card-view">
			<!-- <tui-divider width="80%" gradual>选择要练习的题目类型</tui-divider> -->

			<view class="margin">
				<tn-radio-group activeColor="#5677fc" v-model="mode">
					<tn-radio name="normal">正常模式</tn-radio>
					<tn-radio name="memory">记忆模式</tn-radio>
					<tn-radio name="random">随机模式</tn-radio>
				</tn-radio-group>
			</view>

			<tui-cascade-selection height="200px" :itemList="cateList" @complete="complete" text="请选择题库" :defaultItemList="defaultCateList"></tui-cascade-selection>
		</view>

		<view style="width:90%; margin: 10rpx auto;" class="padding-bottom-xl">
			<tui-button shape="circle" shadow bold preventClick :disabled="questionCount == 0" @click="checkPay">{{btnText}}</tui-button>
		</view>

		<login ref="login" v-on:succ="getCate"></login>

		<!-- 题库支付、激活弹窗组件 -->
		<kz-cate-pay ref="cate_pay"
			:cateId="cateId"
			:catePrice="catePrice"
			:showCateConfirm="showCateConfirm"
			:confirmCateContent="confirmCateContent"
			v-on:paySuccess="goTrain()"
			v-on:codeSuccess="goTrain()"
			v-on:cancel="closeDialog"
			>
		</kz-cate-pay>
	</view>
</template>

<script>
	import cateApi from "@/common/api/cate.js"
	export default {
		data() {
			return {
				page: '',
				cateList: [],
				cateId: 0,
				cateName: '',
				questionCount: 0,
				btnText: '开始练习',
				mode: 'normal',
				defaultCateList: [],

				// 题库支付弹窗相关
				catePrice: 0.00,
				showCateConfirm: false,
				confirmCateContent: '',
				// confirmCateButton: [{
				// 		text: "取消",
				// 		type: "red",
				// 		plain: true
				// 	},
				// 	{
				// 		text: "确认并支付",
				// 		type: "green",
				// 		plain: false
				// 	}
				// ],
				// 激活码相关
				// showCateCode: false,
				// code: '',
				// 支付结果弹窗相关
				// showResult: false,
				// payResultContent: '',
				// resultButton: [{
				// 	text: '确定',
				// 	type: 'green'
				// }],
			}
		},
		onLoad(e) {
			this.page = e?.page
			this.getCate()
		},
		methods: {
			// 获取题库
			getCate() {
				this.http('cate/getThree', {
					kind: 'QUESTION'
				}).then(res => {
					this.cateList = res.data

					// 模拟题库点击事件
					if (this.cateId) {
						this.complete({
							value: this.cateId,
							result: [
								{
									text: this.cateName
								}
							]
						})
					} else {
						let defaultCate = this.utils.getData('default_cate-QUESTION')
						console.log('defaultCate', defaultCate)
						if (defaultCate) {
							let lastCate = [...defaultCate.result].pop()
							console.log('lastCate', lastCate)

							let defaultCateList = []
							for (var i = 0; i < defaultCate.result.length; i++) {
								defaultCateList.push(defaultCate.result[i].text)
							}
							this.defaultCateList = defaultCateList

							this.cateId = lastCate.value
							this.cateName = lastCate.text

							this.complete({
								value: this.cateId,
								result: [
									{
										text: this.cateName
									}
								]
							})
						}

						// let user = this.utils.getData('user')
						// if (user?.info && user.info?.default_cate_ids) {
						// 	this.defaultCateList = [...user.info.default_cate_names]

						// 	this.cateId = [...user.info.default_cate_ids].pop()
						// 	this.cateName = [...user.info.default_cate_names].pop()

						// 	this.complete({
						// 		value: this.cateId,
						// 		result: [
						// 			{
						// 				text: this.cateName
						// 			}
						// 		]
						// 	})
						// }
					}

					// this.defaultCateList = ["消防","灭火救援常识",]
				})

				// 模拟题库点击事件
				if (this.cateId) {
					this.complete({
						value: this.cateId,
						result: [
							{
								text: this.cateName
							}
						]
					})
				}
			},
			// 选择题库
			complete(e) {
				console.log(e);
				console.log('您选择的数据为：', e);

				this.cateId = e.value
				this.cateName = e.result[e.result.length - 1].text

				let params = {
					cate_id: this.cateId,
					just_get_count: 1,
				}

				this.$refs.login.afterMethod = () => {
					this.complete(e)
				}
				console.log('afterMethod', this.$refs.login.afterMethod)
				this.http('question/train', params).then(res => {
          if (res.code == 1) {
            this.questionCount = res.data.total
            if (this.questionCount) {
              this.btnText = '开始练习（' + this.questionCount + '题）'
            } else {
              this.btnText = '当前分类无试题'
            }
          } else {
            this.utils.toast(res.msg)
          }
				})

			},
			// 检测题库是否已开通
			checkPay() {
				if (!this.cateId) {
					this.utils.toast('请先选择练习的题库')
					return
				}

				// 检测题库是否已开通
				cateApi.checkPay(this, this.cateId).then(res => {
					console.log('checkPay res', res)

					if (res.code != 1) {
						this.utils.toast('支付失败：' + res.msg)
						return
					}

					// 无须支付
					if (res.data.status == 1) {
						this.goTrain()
						return
					} else if (res.data.status == 2) {
						this.catePrice = parseFloat(res.data.price)
						this.confirmCateContent = res.data.msg
						this.showCateConfirm = true
					}
				})
			},
			// 开始练习
			goTrain() {
				this.showCateConfirm = false
				this.showResult = false
				this.confirmCateContent = ''
				this.payResultContent = ''

				this.page = this.page == 'train' ? 'train' : 'look'
				this.utils.goto(this.page + '?cateId=' + this.cateId + '&cateName=' + this.cateName + '&mode=' + this.mode)
			},
			closeDialog() {
				console.log('get emit closeDialog')
				this.showCateConfirm = false
			}
		}
	}
</script>

<style>
	.tn-radio__label {
		color: #333 !important;
		font-size: 15px !important;
	}


</style>
